<template>
  <div class="item-size-choose" @touchmove.stop.prevent>
    <div
      :class="{
        mask: true,
        animated: true,
        fadeIn: !pageLeave,
        fadeOut: pageLeave
      }"
      @click="maskClick"
    ></div>
    <div
      :class="{
        'choose-panel': true,
        animated: true,
        slideInUp: !pageLeave,
        slideOutDown: pageLeave
      }"
      @click.stop
    >
      <div class="top-bar with-grey-bottom-border">
        <div class="title">选择支付方式</div>
      </div>
      <div
        v-if="-orderInfo.payment == 0 && orderInfo.points > 0"
        class="price with-grey-bottom-border"
      >{{ orderInfo.points | pointFix }} 积分</div>
      <div
        v-else
        class="price with-grey-bottom-border"
      >￥{{ orderInfo.payment - -(orderInfo.freight ? orderInfo.freight : 0) }}</div>
      <div class="type">
        <!-- <div v-if="!isMiniProgram" class="type-cell">
          <div class="left">
            <img src="@/assets/new-icon/支付宝.png" alt="" />
            支付宝
          </div>
          <div
            @click="type = 1"
            :class="{ right: true, active: type === 1 }"
          ></div>
        </div>-->
        <div
          v-if="
            !onlyAlipay && !(-orderInfo.payment == 0 && orderInfo.points > 0)
          "
          class="type-cell"
        >
          <div class="left">
            <img src="@/assets/支付方式-assets/icon_weixin.png" alt />
            微信支付
          </div>
          <div @click="type = 2" :class="{ right: true, active: type === 2 }"></div>
        </div>
        <div v-if="!onlyAlipay" class="type-cell">
          <div class="left" v-if="-orderInfo.payment == 0 && orderInfo.points > 0">
            <img src="@/assets/支付方式-assets/余额1.png" alt />
            剩余积分（{{ orderInfo.userPoints | pointFix }}）
          </div>
          <div v-else class="left">
            <img src="@/assets/支付方式-assets/余额1.png" alt />
            余额（{{ orderInfo.balance }}）
          </div>

          <div @click="type = 3" :class="{ right: true, active: type === 3 }"></div>
        </div>
      </div>
      <div class="bottom-btn" :class="{ 'fullscreen-bottom-style': isFullscreen }">
        <button @click="pay" :style="{background: mainColor}">支 付</button>
      </div>
    </div>
    <confirm ref="cfm"></confirm>
  </div>
</template>

<script>
import { orderPay } from "@/api/mall";
import confirm from "@/components/confirm";
import wx from "weixin-js-sdk";
import { mapState } from "vuex";
export default {
  props: ["orderInfo", "goodList"],
  data() {
    return {
      pageLeave: false,
      type: 2,
      showConfirm: false,
      onlyAlipay: false
    };
  },
  computed: {
    ...mapState({
      isMiniProgram: state => state.app.isMiniProgram,
      isFullscreen: state => state.app.isFullscreen,
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor
    })
  },
  methods: {
    maskClick() {
      this.$refs.cfm.show({
        text: "您还未支付，确认离开？",
        callback: () => {
          this.leave();
        }
      });
      this.showConfirm = true;
    },
    pay() {
      if (
        this.orderInfo.userPoints &&
        this.orderInfo.points &&
        -this.orderInfo.userPoints - -this.orderInfo.points > 0
      ) {
        this.$dialog.toast({
          mes: "用户积分不足",
          icon: "error"
        });
        return;
      }
      let baseUrl =
        process.env.NODE_ENV === "development"
          ? this.$config.baseUrl.dev
          : this.$config.baseUrl.pro;
      switch (this.type) {
        case 1:
          window.location.href =
            baseUrl +
            "front/order/orderPay?order_no=" +
            this.orderInfo.order_no +
            "&type=3";
          break;
        case 2:
          let ua = navigator.userAgent.toLowerCase();
          // alert(ua)
          if (ua.match(/MicroMessenger/i) == "micromessenger") {
            if (this.isMiniProgram) {
              // alert("在小程序里");
              wx.miniProgram.navigateTo({
                url:
                  "/pages/pay/pay?order_no=" +
                  this.orderInfo.order_no +
                  "&type=" +
                  2
              });
            } else {
              window.location.href =
                this.$config.baseUrl.pro.split("/api")[0] +
                "/wx/pay?order_no=" +
                this.orderInfo.order_no;
            }
          } else {
            alert("不在微信里");
          }
          break;
        case 3:
          if (-this.orderInfo.balance > -this.orderInfo.payment) {
            this.$dialog.toast({
              mes: "余额不足，请选择其他支付方式！",
              timeout: 1500,
              icon: "error"
            });
          } else {
            orderPay({ type: 2, order_no: this.orderInfo.order_no }).then(
              res => {
                if (res.status === 200) {
                  this.$router.push({
                    path: "/pay-succ",
                    query: {
                      type: "success",
                      order_no: res.data.data.order_no
                    }
                  });
                } else {
                  this.$router.push({
                    path: "/pay-succ",
                    query: {
                      type: "error"
                    }
                  });
                }
              }
            );
          }
          break;
      }
    },
    leave() {
      this.showConfirm = false;
      this.pageLeave = true;
      setTimeout(() => {
        this.$emit("panelClose", "");
        if (this.$route.path.indexOf("/payment") !== -1) {
          this.$router.replace({
            path: "/order-detail",
            query: {
              order_no: this.orderInfo.order_no,
              status: 0
            }
          });
        }
      }, 400);
    }
  },
  components: {
    confirm
  },
  mounted() {},
  created() {}
};
</script>

<style lang="less" scoped>
.item-size-choose {
  z-index: 9;
  position: relative;

  .mask {
    animation-duration: 0.4s;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .choose-panel {
    animation-duration: 0.4s;
    z-index: 10000;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, 1);

    .top-bar {
      padding: 0 3.2%;
      width: 100%;
      left: 0;
      bottom: 10rem;
      text-align: center;
      height: 2rem;
      line-height: 2rem;

      .title {
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        font-size: 0.64rem;
      }
    }

    .price {
      color: #444444;
      font-size: 1.4rem;
      text-align: center;
      height: 4.6rem;
      padding-top: 1.3rem;
      font-weight: bold;
    }

    .type {
      padding: 0 3.2%;
      margin: 1rem 0;

      .type-cell {
        display: flex;
        justify-content: space-between;
        color: #444444;
        font-size: 0.64rem;
        line-height: 2rem;

        .left {
          img {
            width: 0.9rem;
            height: 0.9rem;
            vertical-align: middle;
            margin-right: 0.4rem;
          }
        }

        .right {
          border: 1px solid rgba(153, 153, 153, 1);
          border-radius: 50%;
          height: 0.72rem;
          width: 0.72rem;
          margin-top: 0.6rem;
        }

        .active {
          background-image: url("../../../assets/支付方式-assets/选中1.png");
          background-size: 100% 100%;
          border: none;
        }
      }
    }

    .bottom-btn {
      line-height: 2rem;
      background: #fff;
      padding: 0.3rem 3.2%;

      button {
        width: 100%;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        font-size: 0.64rem;
        background: rgba(24, 131, 247, 1);
        border: none;
        border-radius: 0.7rem;
        height: 1.4rem;
      }
    }
  }
}
</style>
